<template>
  <div class="login_container">
    <el-dialog
      title="选择认证方式"
      :visible.sync="dialogVisible"
      width="30%">
      <center><div>
        <el-button @click="openrl()">
          人脸验证
        </el-button>
        <el-button @click="openmm()">
          密码验证
        </el-button>
      </div>
      </center>
    </el-dialog>

    <div v-show="open.rl" class="login_box">
      <div class="avatar_box">
        <el-avatar style="width: 100%;height: 100%" :src="require('@/assets/png/defaultAvatar.png')" alt=""/>
      </div>
      <video v-show="flag" id="video" width="100%" height="100%" autoplay class="vd"></video>
      <canvas id="canvas" width="450" height="300" class="cv"></canvas>
      <el-button  id="register" @click="btn()" class="bt">识别</el-button>
    </div>


    <div v-show="open.mm" class="login_box">
      <div class="avatar_box">
        <el-avatar style="width: 100%;height: 100%" :src="require('@/assets/png/defaultAvatar.png')" alt=""/>
      </div>
      <!-- 表单区域 -->
      <el-form :model="loginFrom" ref="loginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">
        <el-form-item>
          <span style="font-weight: bold;font-size: 18px">尊敬的管理员</span>
          <timer></timer>
        </el-form-item>
        <el-form-item prop="username"><!-- 用户名 -->
          <el-input v-model="loginFrom.username" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item prop="password"><!-- 密码 -->
          <el-input v-model="loginFrom.password" placeholder="请输入密码" prefix-icon="el-icon-lock"
                    type="password"></el-input>
        </el-form-item>
        <el-form-item class="btns"><!-- 按钮区域 -->
          <!--      然后在之前的重置按钮上绑定一个click事件，指定一个名为“resetLoginForm”的触发方法：-->
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

//点击按钮注册事件

import admin from "../api/acl";
import timer from "../components/Timer";
import face from "../api/face";

export default {
  components: {
    timer
  },
  data() {
    return {
      dialogVisible: true,
      open:{
        rl: 'false',
        mm: 'false',
      },
      flag: true,
      face: {
        faceBase: '',
        username: ''
      },
      //这里是登录表单的数据绑定对象
      loginFrom: {
        username: '',
        password: ''
      },
      //表单验证规则对象
      loginFormRules: {
        //验证用户名是否合法
        username: [
          {required: true, message: '请输入登录名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        //验证密码是否合法
        password: [
          {required: true, message: '请输入登密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
        ]
      }
    };
  },
  created() {

  },
  methods: {

    openrl(){
      this.open.rl=true
      this.open.mm=false
      this.dialogVisible = false
      this.getVideo()

    },
    openmm(){
      this.open.mm=true
      this.open.rl=false
      this.dialogVisible = false

    },

    getVideo() {
      var video = document.getElementById('video');
      //返回画布二维画图环境
      let getUserMedia = navigator.getUserMedia
      getUserMedia.call(navigator, {
          video: true,
          audio: false
        },
        // 调用成功
        function (localMediaStream) {
          //获取摄像头捕捉的视频流
          console.log("获得摄像头")
          document.getElementById('video').srcObject = localMediaStream;
        },
        //调用失败
        function () {
          console("请给摄像头权限")
        });
    },
    btn() {
      //点击按钮时拿到登陆者面部信息
      let userContext = canvas.getContext("2d");
      userContext.drawImage(video, 0, 0, 400, 250);
      var userImgSrc = document.getElementById("canvas").toDataURL("img/png");
      //拿到bash64格式的照片信息
      this.flag = false
      var faceBase = userImgSrc.split(",")[1];
      this.face.faceBase = faceBase
      face.faceLogin(this.face)
        .then(response => {
          console.log(response.message)
          if (response.message == '1.0') {
            localStorage.setItem("token", response.data.token)
            /**
             * @description: 获得数据表单数据 按照规则进行校验
             * @return false 不执行登录 true执行登录
             */
              // this.$router.push('/home')
            window.location.href='http://localhost:9999/welcome'
              this.$message({

                showClose: true,
                message: '已进入系统,请注意',
                type: 'success',
                duration: 1 * 1500
              });
            //跳转至登录页面
          } else {
            this.$message({
              showClose: true,
              message: '识别失败页面已刷新',
              type: 'error',
              duration: 1 * 1500
            },
              this.$router.go(0)
            );

          }
        })
        .catch(response=>{

          this.$router.go(0)
        })

    },
    //点击重置按钮，重置登录表单
    resetLoginForm() {
      // console.log(this);
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      admin.Login(this.loginFrom)
        .then(response => {
          console.log(response)
          localStorage.setItem("token", response.data.token)
          /**
           * @description: 获得数据表单数据 按照规则进行校验
           * @return false 不执行登录 true执行登录
           */
          this.$refs.loginFormRef.validate((valid) => {
            if (!valid) return;
            this.$router.push('/home')
            this.$message({
              showClose: true,
              message: '已进入系统,请注意',
              type: 'success',
              duration: 1 * 1500
            });
          }
          )


        });
    }
  },


}
</script>

<!-- 支持less语法格式，scoped代表样式只在本组件起作用 -->
<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {

  width: 650px;
  height: 400px;
  background-color: #fff;
  border-radius: 3px; //圆角效果
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  //less语法的嵌套

  .vd {
    width: 100%;
    height: 100%;
  }

  .cv {
    width: 113%;
    height: 120%;
  }

  .bt {
    position: absolute;
    height: 50px;
    width: 100%;
    right: 0;
    bottom: 0px; //靠下
  }

  .avatar_box {
    height: 130px;
    width: 130px;
    background-color: #fff;
    border: 1px solid #eee; //加个灰色边框
    border-radius: 50%; //div组件变成圆形
    padding: 10px; //图片和边框之间有10px间隙
    box-shadow: 0 0 5px #ddd; //添加一个阴影，向外扩散5像素
    //头像居中，向左移动box的50%，再向右移动自身的-50%，向上移动该组件高度的-50%，
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%); //翻转

    img {
      height: 100%;
      width: 100%;
      border-radius: 50%; //图片变成圆形
      background-color: #eee;
    }
  }
}


.login_form {
  position: absolute;
  bottom: 0px; //靠下
  width: 100%;
  padding: 0 20px; //上下内边距0，左右内边距20px
  //border-box为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
  //实际宽度会是width减去border + padding的计算值
  //此处是为了不让input超出我们的登录父div
  box-sizing: border-box;
}

.btns {
  display: flex; //flex布局
  //justify-content控制项目在横轴的对齐方式
  //flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
  justify-content: flex-end;
}


</style>
